Clean Form - PHP Working Contact Quote Booking JobApply Reservation Multi-purpose Form


Item Support

Thank you for purchasing the Template. Need Support: If you have any questions that are beyond the scope of this help file, please feel free to email us with mention Purchase Code ( Where Is My Purchase Code?) via my user page contact form here. You can also Ping Us through Item Support Tab (better and fast). Thanks so much!


 

Clean Form is a Full Responsive PHP Working Ajax Multi-purpose Form with Required field jQuery validation built on PHP, HTML5, CSS3 and JQuery. Code written in a simple way by which you can easily integrated at your site.

Clean Form Responsive PHP Working Ajax Multi-purpose Form can be used for your organization, company, hotel room reservation, restaurant table reservation, Job Apply, business or Personal use. So that your visitors, customers, clients, agents, members can contact you, let you know their concern, book restaurant table, hotel reservation, apply for job through the form.

Clean Form is a responsive, clean, well documented Ajax Multi-purpose Form. It can be simply integrated at your site with the documentation help. All the codes are clean, well commented and well organized with proper help documentation. It looks great with all types of devices. Try out the demo.

Features


  • AJAX enabled (no page reloads)
  • PHP Working Ajax Multi-purpose Form with Required field jQuery validation
  • SMTP option available
  • Get the IP of the sender inside the e-mail body
  • Anti Spam (simple Math Captcha)
  • Easy Setup for sending email to recipient. 100% working script.
  • Google Maps & Fonts
  • W3C Valid HTML Code
  • HTML5 & CSS3
  • 100% Responsive & Mobile-Friendly Layout
  • Font Awesome icons
  • Browser Compatibility
  • Fully Customizable
  • Easy integration into your current HTML/PHP site
  • Clean and well commented Code
  • Easily customizable
  • Well Documentation ( proper help instructions for setup )
  • Dedicated Support
  • and Much More!

Installation


After extract the main zip file, you'll see these folders and files:

  • clean-form >> Main theme folder
    • css >> css file folder
    • fonts >> icon fonts folder
    • js >> javascript files folder
    • uploads >> temporaryly upload attachment
    • phpmailer >> The classic email sending library for PHP
    • mgsc-email-template >> email template HTML
  • documentation >> help file folder

HTML FILES INCLUDED :

  • HTML FILES INCLUDED :
    • Each Style has it's own html file

PHP FILE INCLUDED :

  • PHP files for Processing Form
  • mgs-functions.php >> Common function for all Form

CSS Structure


img

Javascript


img

Settings


Font-awesome Icon

To change icon & it's size just change icon class name like fa-solid fa-phone, fa-solid fa-envelope, fa-solid fa-house classes (see examples below). Find more on fontawesome & fontawesome examples

font-awesome-icon-class img

How to edit text

  1. Go to template folder & open the file with your HTML/PHP editor.
  2. Find the text you need.(You can use the search tool CTRL+F)
  3. Edit text in HTML/PHP editor. Save the file and open it with your Browser to see the changes.

 

 

How to edit Form

Each form has it's own unique id for form valiadtion and ajax functionality. So, js code for form processing written based on the form id.

edit Form

How to edit Form - more explanation

HTML File

Each form has it's own unique id for form valiadtion and ajax functionality. So, js code for form processing written based on the form id.

Form Fields
Google recaptcha
Google recaptcha

For Google recaptcha you will need only sitekey. You do not need Secret key in my script.

Google recaptcha
JS File

Each form has it's own unique id for form valiadtion and ajax functionality. So, js code for form processing written based on the form id.

form-id Form process in jQuery Form process in jQuery Form process in jQuery

Form success error message print

Form success error message print
How to add Different Language Calendar

You have to add a language file for your specific langauage Calendar. In root js=>locales directory you will find around 82 differnet calendar language files.


<script src="js/locales/bootstrap-datepicker.fr.js"></script>

calendar-lang-file calendar-lang-file
PHP File
Form process in PHP

How to edit info box

edit info
Google Map Settings

How to remove map

map map map

To change map location, Zooming & Color go to js/main.js

  1. Go to template folder & open main.js file with your HTML/PHP editor.
  2. Find mapOptions(You can use the search tool CTRL+F)
  3. Edit your desire location, Zoom & Color (see image below). Save the file and open it with your Browser to see the changes.
img

To change map marker popup text go to js/main.js

  1. Go to template folder & open main.js file with your HTML/PHP editor.
  2. Find map-marker(You can use the search tool CTRL+F)
  3. Edit your text (see image below). Save the file and open it with your Browser to see the changes.
img

Go to bottom of a html file and put your YOUR_API_KEY as you can see in the image

img

How to Get an API key

Go to the Adding a Google Map page and flow the instructions

Google Api Setup

Go to bottom of a html file and put your YOUR_API_KEY as you can see in the image

For getting specific Country location suggestions in address field then you have to assign the country code (use your required country code instead of 'UK').

address-auto-search-settings

<script>
	var options = {
		componentRestrictions: {country: 'UK'}
	};
	function init() {
		var input = document.getElementById('propertyaddress');
		var input2 = document.getElementById('address');
		var autocomplete = new google.maps.places.Autocomplete(input, options);
		var autocomplete2 = new google.maps.places.Autocomplete(input2, options);
	} 
	google.maps.event.addDomListener(window, 'load', init);
</script>							
								

How to Get a key for Google Places API Web Service

Go to the Get a key for Google Places API Web Service page and flow the instructions

Process form

Go to template folder & open mgs-functions.php file with your HTML/PHP editor and change according to you will find (Change here). Please check the following screenshot image.

phpmailer

Some Explanatio of the above screenshot

Sending Email from Local Web Server using PHPMailer

phpmailer

From email address and name

email address and name

How to set up form recipient email and name

recipient email and name

Contact Process - SMTP setup

Tell PHPMailer to use SMTP

use SMTP

Enable SMTP debugging

SMTP debugging

HTML-friendly debug output

html-friendly

Set the hostname of the mail server

hostname

Set the SMTP port number

SMTP port

Set the SMTP authentication

authentication

Additional Settings

Add CC and BCC

CC and BCC

HTML or Plain text email

HTML or Plain text

Set email Subject and email body

Go to template folder & open contact-process.php/YOUR-FORM-PROCESS-FILE.php file with your HTML/PHP editor and change Subject as you need. Please check the following screenshot image.

Email subject

email subject

Prepare email body

email body

File size restriction

file-size
How to use Tags Input

Add data-role="tagsinput" to add Tags Input. Also you have to include necessary css and js files (check demo page)

tags-input
How to use email Template/Plain email

Open your form processing php file and set as described in the following screenshots. You will get email template html in mgsc-email-template directory

email body
Confirmation email php Customization

email settings php file => mgs-functions.php

Set $mgssendconfirmation = true; if want to send Confirmation email to sender

email-send-confirmation-settings

Confirmation email php file => mgs-send-confirmation.php

email-send-confirmation
email copy to Sender

usercopy settings php file => mgs-functions.php

Set $usercopy = (isset($_POST["usercopy"])) ? filter_var($_POST['usercopy'], FILTER_SANITIZE_NUMBER_INT) : 1; if want to send Usercopy email to Sender

make it 1 if want to force send Usercopy email to Sender.

usercopy-email-send-settings

Otherwise you can put a checkbox in your form for sender checked if they want a usercopy.


<input name="usercopy" id="usercopy" type="checkbox" value="1"><label for="usercopy">Send a copy to My email</label>				
				
checkbox-for-sender-usercopy